<template>
  <div class="container">
    <UserCenterTab selected="Setting"/>
    <transition-group tag="div">
      <div :key="'Setting'">
        <h1 style="text-align: center; padding: 50px;"> Setting </h1>
        <div class="setting-wrapper">
          <el-card class="set-password-wrapper left-wrapper" shadow="never">
            <ul>
              <li>常规设置</li>
            </ul>
          </el-card>
          <el-col class="right-wrapper">
            <el-card class="set-email-wrapper" shadow="never">
              <h2>修改邮箱</h2><br>注意：需要先后验证您的旧邮箱、新邮箱<br><br>
              <el-form ref="emailForm" :model="emailForm" :rules="rules">
                <!-- 旧邮箱 -->
                <el-form-item label="旧邮箱" label-width="100px">
                  <el-col span="8">
                    <el-input v-model="$store.state.user.email" disabled/>
                  </el-col>
                </el-form-item>
                <!-- 新邮箱 -->
                <el-form-item label="新邮箱" label-width="100px" prop="newEmail">
                  <el-col span="8">
                    <el-input v-model="emailForm.newEmail" placeholder="更换新邮箱"/>
                  </el-col>
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item label="验证码" label-width="100px" prop="verifyCode">
                  <el-col span="8">
                    <el-input v-model="emailForm.verifyCode" autocomplete="off" maxlength="4" name="verifyCode"
                              placeholder="请输入验证码" @keyup.enter="changeEmail"/>
                    <span style="float: right; color: #666666; cursor: pointer;"
                          @click="changeVerifyCode">点击图片刷新验证码</span>
                  </el-col>
                  <el-col span="12"><img ref="verifyCodeImg" @click="changeVerifyCode" src="api/generateVerifyCode"
                                         class="verifyCodeImg"></el-col>
                </el-form-item>
                <br>
              </el-form>
              <el-button type="myBlue" @click="changeEmail" :loading="changeEmailLoading">验证邮箱</el-button>
            </el-card>
            <el-card class="set-password-wrapper" shadow="never">
              <h2>修改密码</h2><br>
              <el-form ref="emailForm">
                <!-- 旧密码 -->
                <el-form-item class="el-form-item" label="旧密码" label-width="100px" required>
                  <el-col span="8">
                    <el-input v-model="oldPassword" type="password" autocomplete="off"/>
                  </el-col>
                </el-form-item>
                <!-- 新密码 -->
                <el-form-item class="el-form-item" label="新密码" label-width="100px" required>
                  <el-col span="8">
                    <el-input v-model="newPassword1" type="password" autocomplete="off"/>
                  </el-col>
                </el-form-item>
                <!-- 确认新密码 -->
                <el-form-item class="el-form-item" label="确认新密码" label-width="100px" required>
                  <el-col span="8">
                    <el-input v-model="newPassword2" type="password" autocomplete="off"/>
                  </el-col>
                </el-form-item>
              </el-form>
              <el-button type="myBlue" @click="changePassword" :loading="changePasswordLoading">修改密码</el-button>
            </el-card>
          </el-col>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import UserCenterTab from "@/components/UserCenter/UserCenterTab";

export default {
  name: "Setting",
  components: {UserCenterTab},
  data() {
    return {
      oldPassword: "",
      newPassword1: "",
      newPassword2: "",
      emailForm: {newEmail: "", verifyCode: ""},
      changeEmailLoading: false,
      changePasswordLoading: false,
      rules: {
        newEmail: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']}
        ],
        verifyCode: [
          {required: true, message: '验证码不能为空', trigger: 'blur'},
          {
            required: true,
            pattern: /(^[\da-zA-Z]{4}$)/,
            message: '请输入正确的验证码',
            trigger: 'blur'
          }]
      },
    };
  },
  created() {
  },
  methods: {
    changePassword() {
      this.changePasswordLoading = true
      if (this.newPassword1 !== this.newPassword2)
        this.$notify({
          title: "修改密码失败",
          message: "两次的密码不一致！",
          type: "error",
          offset: 200,
        });
      else {
        const payload = {
          password: this.oldPassword,
          newPassword: this.newPassword1,
        };
        this.$http.post("api/user/setPassword", payload).then(res => {
          200 === res.data.code &&
          this.$notify({
            title: "修改密码成功",
            type: "success",
            offset: 200,
          });
          this.changePasswordLoading = false
        });
      }
    },
    changeEmail() {
      this.$refs['emailForm'].validate((valid) => {
        if (valid) {
          // 通过表单校验
          this.changeEmailLoading = true
          const payload = {
            email: this.emailForm.newEmail,
            verifyCode: this.emailForm.verifyCode,
          }
          let msg = "请前往新邮箱[" + this.emailForm.newEmail + "]进行验证！"
          if (this.$store.state.user.email) {
            msg = "请前往旧邮箱[" + this.$store.state.user.email + "]进行验证！"
          }
          this.$http.post("api/user/updateEmail", payload).then(res => {
            if (200 === res.data.code) {
              this.$notify({
                title: "请验证邮箱",
                message: msg,
                type: "success",
                offset: 200,
              });
            }
            this.changeEmailLoading = false
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    changeVerifyCode() {
      this.$refs.verifyCodeImg.src = "api/generateVerifyCode?t=" + Date.now();
    },
  },
}
</script>

<style scoped>
.container {
  min-width: 1440px;
  width: 1440px;
  margin: 0 auto;
}

.setting-wrapper {
  display: flex;
  padding: 40px;
}

.left-wrapper {
  width: 400px;
  margin-right: 20px;
  background-color: #fff;
}

.right-wrapper {
  width: 900px;
}

.el-card {
  margin-bottom: 20px;
}

.el-input {
  margin-bottom: 10px;
}

.verifyCodeImg {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 20px;
}

.verifyCodeTips {
  color: #55b6ea;
  cursor: pointer;
  padding: 10px;
}
</style>